说说在 Canvas 中如何填充形状基本颜色 您所在的位置:网站首页 canvas clip边线 说说在 Canvas 中如何填充形状基本颜色

说说在 Canvas 中如何填充形状基本颜色

2023-10-15 16:46| 来源: 网络整理| 查看: 265

Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。

(1)颜色字符串名称

context.fillStyle = "red"; context.fillRect(100, 100, 100, 100);

运行结果:

注意:HTML 4.0 只支持 16 种颜色名,它们是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

目前还没有 HTML5 专属的颜色名。

以上这些类型的颜色描述值也可以应用到 strokestyle 属性中。

(2)rgb() 方法

利用 rgb() 方法设定 24 位 RGB 值来指定填充颜色。

context.fillStyle = "rgb(255,127,80)";

运行结果:

(3)十六进制数字字符串

也可以使用一个十六进制数字字符串来指定填充颜色。

context.fillStyle = "#6495ED";

运行结果:

(4)rgba( ) 方法

rgba( ) 方法可以指定 32 位色值来指定填充颜色,其后8位表示透明度,a 是 Alpha 的缩写。

context.fillStyle = "rgba(255,127,80,0.5)";

运行结果:

透明度范围为 1( 不透明 ) ~ 0 (完全透明 ),示例代码设置为 0.5,表示半透明。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有